<style>
    .select-address {
        display: inline-block !important;
        width: 120px;
        margin-right: 10px;
        padding: 10px 0px;
        border: 1px solid #e6e6e6;
        margin-bottom: 0px;
    }
</style>
<script type="text/html" template lay-done="layui.data.sendParams(d);">
    <div class="layui-form coreshop-form  layui-form-pane myOrderDetails" lay-filter="LAY-app-CoreCmsOrder-editForm" id="LAY-app-CoreCmsOrder-editForm">
        <input type="text" class="layui-input layui-hide" id="userId" name="userId" value=" {{d.params.data.orderModel.user.id}}">
        <input type="text" class="layui-input layui-hide" id="number" name="number" value=" {{d.params.data.orderModel.user.number}}">
        {{# if (d.params.data.orderModel.store){}}
        <div class="layui-form-item">
            <label class="layui-form-label">订单编号</label>
            <div class="layui-input-inline layui-inline-3 layui-form-mid">
                {{d.params.data.orderModel.orderId}}
            </div>
            <input type="hidden" name="orderId" value="{{d.params.data.orderModel.orderId}}">
            <input type="hidden" name="editType" value="2">
            <label class="layui-form-label layui-form-required">收货门店</label>
            <div class="layui-input-inline layui-inline-4 address-class">
                <select name="storeId">
                    {{# layui.each(d.params.data.storeList, function(index, item){ }}
                    <option value="{{item.id}}" {{item.id==d.params.data.orderModel.store.id?'selected="selected"':''}}>{{item.storeName}}</option>
                    {{# }); }}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">提货人名</label>
            <div class="layui-input-inline layui-inline-3">
                <input type="text" value="{{d.params.data.orderModel.shipName}}" name="shipName" lay-verify="required" class="layui-input">
            </div>
            <label class="layui-form-label layui-form-required">提货人手机</label>
            <div class="layui-input-inline layui-inline-4">
                <input type="text" value="{{d.params.data.orderModel.shipMobile}}" name="shipMobile" lay-verify="required|phone" class="layui-input">
            </div>
        </div>
        {{# }else {  }}
        <div class="layui-form-item">
            <label class="layui-form-label">订单编号</label>
            <div class="layui-input-inline  layui-inline-3 layui-form-mid ">
                {{d.params.data.orderModel.orderId}}
            </div>
            <input type="hidden" name="orderId" value="{{d.params.data.orderModel.orderId}}">
            <input type="hidden" name="editType" value="1">
            <label class="layui-form-label">订单总金额</label>
            {{#  if(d.params.data.orderModel.payStatus==1){ }}
            <div class="layui-input-inline layui-inline-3">
                <input type="number" name="orderAmount" value="{{d.params.data.orderModel.orderAmount}}" lay-affix="number" step="0.1" lay-precision="2" min="0" class="layui-input">
            </div>
            {{#  } else { }}
            <div class="layui-input-inline layui-form-mid layui-inline-3">{{d.params.data.orderModel.orderAmount}}</div>
            {{#  } }}
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">收货人姓名</label>
            <div class="layui-input-inline layui-inline-3">
                <input type="text" name="shipName" value="{{d.params.data.orderModel.shipName}}" lay-verify="required" class="layui-input">
            </div>
            <label class="layui-form-label layui-form-required">收货人手机</label>
            <div class="layui-input-inline layui-inline-3">
                <input type="text" name="shipMobile" value="{{d.params.data.orderModel.shipMobile}}" lay-verify="required|phone" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">支付方式</label>
            <div class="layui-input-inline layui-inline-3">
                <select name="paymentCode" lay-verify="required" id="paymentCode">
                    <option value="" selected="selected">请选择</option>
                    {{# layui.each(d.params.data.newPaymentsList, function(index, item){ }}
                    <option value="{{ item.description }}" {{ item.description == d.params.data.orderModel.paymentCode ? 'selected="selected"' : '' }}>
                        {{ item.description }}
                    </option>
                    {{# }); }}
                </select>
            </div>
                <label class="layui-form-label layui-form-required">订单类型</label>
                <div class="layui-input-inline layui-inline-3">
                    <select name="orderTypeName" lay-verify="required" id="orderTypeName">
                        <option value="" selected="selected">订单类型</option>
                        {{# layui.each(d.params.data.orderTypeCRMList, function(index, item){ }}
                        <option value="{{ item.description }}" {{ item.description == d.params.data.orderModel.orderTypeName ? 'selected="selected"' : '' }}>
                            {{ item.description }}
                        </option>
                        {{# }); }}
                    </select>
                </div>
           
        <div class="layui-form-item" style="display:none">
            <label class="layui-form-label layui-form-required">收货区域</label>
            <div class="layui-input-block address-class">
                <input type="hidden" name="shipAreaId" value="{{d.params.data.orderModel.shipAreaId}}" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">收货地址</label>
            <div class="layui-input-block">
                <input type="text" name="shipAddress" value="{{d.params.data.orderModel.shipAddress}}" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <form class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">选择地区</label>
                    <div class="layui-input-inline">
                        <select name="province" lay-filter="province">
                            <option value="">请选择省</option>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="display: none;">
                        <select name="city" lay-filter="city">
                            <option value="">请选择市</option>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="display: none;">
                        <select name="area" lay-filter="area">
                            <option value="">请选择县/区</option>
                        </select>
                    </div>
                </div>
                <label for="name" class="layui-form-label">新地址</label>
                <div class="layui-input-block">
                    <input name="newshipAddress" id="newshipAddress" class="layui-input" lay-reqText="请输入地址" placeholder="请输入地址" />
                </div>
            </form>
        </div>
        {{# } }}
        <div class="layui-tab layui-tab-card">
            <ul class="layui-tab-title">
                <li class="layui-this">订单记录</li>
                <li>跟进记录</li>
                <li>操作记录</li>
                <li>物流信息</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">

                    <table id="LAY-app-CoreCmsOrderRecords-tableBox" class="layui-tab-item layui-show" lay-filter="LAY-app-CoreCmsOrderRecords-tableBox"></table>
                </div>
                <div class="layui-tab-item">

                    <table id="LAY-app-CoreCmsOrderItem-tableBox" lay-filter="LAY-app-CoreCmsOrderItem-tableBox"></table>

                </div>

                <div class="layui-tab-item">
                    <table id="LAY-app-CoreCmsOrderLogRecords-tableBox" lay-filter="LAY-app-CoreCmsOrderLogRecords-tableBox"></table>
                </div>
                <div class="layui-tab-item">内容-5</div>
            </div>
        </div>
        <div class="layui-form-item core-hidden">
            <input type="button" class="layui-btn" lay-submit lay-filter="LAY-app-CoreCmsOrder-editForm-submit" id="LAY-app-CoreCmsOrder-editForm-submit" value="确认编辑">
        </div>

    </div>
</script>
<script src="../../../lib/jquery/address.js"></script>
<script>var areaData = Area;</script>
<script>
    var debug = layui.setter.debug;
    layui.data.sendParams = function (d) {
        //开启调试情况下获取接口赋值数据
        if (debug) { console.log(d.params.data); }
        layui.use(['admin', 'form', 'laydate', 'upload', 'coreHelper', 'cropperImg', 'view', 'util', 'laytpl', 'table'],
            function () {
                var $ = layui.$
                    , form = layui.form
                    , admin = layui.admin
                    , laydate = layui.laydate
                    , upload = layui.upload
                    , cropperImg = layui.cropperImg
                    , coreHelper = layui.coreHelper
                    , util = layui.util
                    , laytpl = layui.laytpl
                    , table = layui.table,
                    view = layui.view;
                var selectedProvince = '';
                var selectedCity = '';
                var selectedArea = '';
                $form = $('form');
                loadProvince();

                // 加载省数据
                function loadProvince() {
                    var proHtml = '<option value="">请选择省</option>';
                    for (var i = 0; i < areaData.length; i++) {
                        proHtml += '<option value="' + areaData[i].provinceCode + '_' + areaData[i].mallCityList.length + '_' + i + '">' + areaData[i].provinceName + '</option>';
                    }
                    $form.find('select[name=province]').html(proHtml);
                    form.render();

                    form.on('select(province)', function (data) {
                        selectedProvince = data.elem.options[data.elem.selectedIndex].text;
                        selectedCity = ''; // 重置市
                        selectedArea = ''; // 重置区

                        $form.find('select[name=area]').html('<option value="">请选择县/区</option>').parent().hide();
                        var value = data.value;
                        var d = value.split('_');
                        var count = d[1];
                        var index = d[2];

                        if (count > 0) {
                            loadCity(areaData[index].mallCityList);
                        } else {
                            $form.find('select[name=city]').parent().hide();
                        }
                        updateAddress();
                    });
                }
                coreHelper.Post("Api/Tools/GetAreaCheckedList", { id: d.params.data.orderModel.shipAreaId }, function (data) {
                    if (debug) { console.log(data); } //开启调试返回数据
                    var str = "";
                    $.each(data, function (i, n) {
                        str += "<select lay-ignore name='areaId_" + (i + 1) + "' dep='" + (i + 1) + "'  class='select-address'>";
                        str += "<option value='' >请选择</option>";
                        $.each(n.list, function (h, z) {
                            if (n.hasOwnProperty('info') && n.info.id == z.id) {
                                str += "<option value='" + z.id + "' selected='selected'>" + z.name + "</option>";
                            } else {
                                str += "<option value='" + z.id + "' >" + z.name + "</option>";
                            }
                        });
                        str += "</select>";

                    });
                    $("input[name='shipAreaId']").after(str);
                    //以上数据输出完，以下绑定事件
                    $.each(data, function (i, n) {
                        if (i < (data.length)) {
                            $("select[name='areaId_" + (i + 1) + "']").change(function () {
                                changeareaIdArea(i + 1, data.length);
                            });
                        }
                    });

                });
                //数据绑定订单记录
                table.render({
                    elem: '#LAY-app-CoreCmsOrderRecords-tableBox',
                    url: layui.setter.apiUrl + 'Api/CoreCmsOrder/GetCoreCmsOrderItem',
                    method: 'POST',
                    toolbar: '#LAY-app-CoreCmsOrderItem-toolbar',
                    pagebar: '#LAY-app-CoreCmsOrderItem-pagebar',
                    className: 'pagebarbox',
                    defaultToolbar: [],
                    page: true,
                    limit: 30,
                    where: { orderId: d.params.data.orderModel.orderId },
                    limits: [10, 15, 20, 25, 30, 50, 100, 200],
                    text: { none: '暂无相关数据' },
                    cols: [
                        [
                            { field: 'orderId', title: '订单编号', sort: false, width: 130 },
                            { field: 'number', title: '客户编号', sort: false, width: 105 },
                            { field: 'name', title: '产品名字', sort: false, width: 300 },
                            { field: 'nums', title: '数量', sort: false, width: 60 },
                            { field: 'createTime', title: '创建时间', sort: false, width: 300 },
                            /* { width: 162, align: 'center', title:'操作', fixed: 'right', toolbar: '#LAY-app-CoreCmsFollowRecords-tableBox-bar' }*/
                        ]
                    ]
                });

                // 加载市数据
                function loadCity(citys) {
                    var cityHtml = '<option value="">请选择市</option>';
                    for (var i = 0; i < citys.length; i++) {
                        cityHtml += '<option value="' + citys[i].cityCode + '_' + citys[i].mallAreaList.length + '_' + i + '">' + citys[i].cityName + '</option>';
                    }
                    $form.find('select[name=city]').html(cityHtml).parent().show();
                    form.render();

                    form.on('select(city)', function (data) {
                        selectedCity = data.elem.options[data.elem.selectedIndex].text;
                        selectedArea = ''; // 重置区

                        var value = data.value;
                        var d = value.split('_');
                        var count = d[1];
                        var index = d[2];

                        if (count > 0) {
                            loadArea(citys[index].mallAreaList);
                        } else {
                            $form.find('select[name=area]').parent().hide();
                        }
                        updateAddress();
                    });
                }

                // 更新地址输入框
                function updateAddress() {
                    $('#newshipAddress').val(
                        (selectedProvince ? selectedProvince + ' ' : '') +
                        (selectedCity ? selectedCity + ' ' : '') +
                        (selectedArea ? selectedArea : '')
                    );
                }

                // 加载区数据
                function loadArea(areas) {
                    var areaHtml = '<option value="">请选择县/区</option>';
                    for (var i = 0; i < areas.length; i++) {
                        areaHtml += '<option value="' + areas[i].areaCode + '">' + areas[i].areaName + '</option>';
                    }
                    $form.find('select[name=area]').html(areaHtml).parent().show();
                    form.render();

                    form.on('select(area)', function (data) {
                        selectedArea = data.elem.options[data.elem.selectedIndex].text;
                        updateAddress();
                    });
                }
                function changeareaIdArea(i, max_i) {
                    //清除后面节点
                    for (var x = i + 1; x <= 6; x++) {  //最多6层，足够了
                        $("select[name='areaId_" + x + "']").remove();
                    }
                    var val = $("select[name='areaId_" + i + "']").val();
                    if (val != "") {
                        //取子节点数据，然后显示下一级
                        coreHelper.Post("Api/Tools/GetAreaChildren", { id: val }, function (e) {
                            if (debug) { console.log(e); } //开启调试返回数据

                            if (e.length > 0) {
                                var str = "";
                                str += "<select lay-ignore name='areaId_" + (i + 1) + "' dep='" + (i + 1) + "'  class='select-address'>";
                                str += "<option value='' >请选择</option>";
                                $.each(e, function (h, z) {
                                    str += "<option value='" + z.id + "' >" + z.name + "</option>";
                                });
                                str += "</select>";
                                $("select[name='areaId_" + i + "']").after(str);
                                //以上数据输出完，以下绑定事件
                                $("select[name='areaId_" + (i + 1) + "']").change(function () {
                                    changeareaIdArea(i + 1, i + 2);
                                });

                                //如果有返回值，就说明省市区没有选择到最终节点
                                if (1 == 1) {
                                    $("input[name='shipAreaId']").val("");
                                } else {
                                    $("input[name='shipAreaId']").val($("select[name='areaId_" + i + "']").val());
                                }
                            } else {
                                $("input[name='shipAreaId']").val($("select[name='areaId_" + i + "']").val());
                            }
                        });
                    } else {
                        if (1 == 1) {
                            $("input[name='shipAreaId']").val("");
                        } else {
                            //第一级的元素就直接赋值为空就是了
                            if (i == 1) {
                                $("input[name='shipAreaId']").val("");
                            } else {
                                i--;
                                $("input[name='shipAreaId']").val($("select[name='areaId_" + i + "']").val());
                            }

                        }
                    }
                }

                //重载form
                form.render(null, 'LAY-app-CoreCmsOrder-editForm');
            })
    };
</script>